/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-11-29 08:24:48
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-12-04 11:36:21
 * @FilePath: \AdminStration\src\Pages\Front\Common\Options\HLSSource.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import Hls from 'hls.js'
import { Pagination, Select } from 'antd'
import { useEffect, useState } from 'react'
import { Player, BigPlayButton } from 'video-react'
import { CaretDownOutlined } from '@ant-design/icons'

export const HLSSource = ({ src, video }) => {
    useEffect(() => {
        const hls = new Hls()
        if (Hls.isSupported()) {
            hls.loadSource(src)
            hls.attachMedia(video)
            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                video.play()
            })
        }
        return () => hls.destroy()
    }, [src, video])
    return <source src={src} type={'application/x-mpegURL'} />
}

export const LiveBox = ({ live, cover }) => {
    return (
        <div className="CommonPagesUnitVideo">
            <Player fluid={false} width={'100%'} height={'100%'} playsInline poster={cover || ''}>
                <HLSSource isVideoChild src={live} />
                <BigPlayButton position="center" />
            </Player>
        </div>
    )
}

export const LivePage = ({ data }) => {
    const [Current, setCurrent] = useState(1)
    const [PageSize, setPageSize] = useState(1)
    useEffect(() => setCurrent(1), [PageSize])
    return (
        <div className="LivePageBox">
            <div className="Options">
                <div>当前数量 : </div>
                <Select
                    suffixIcon={<CaretDownOutlined />}
                    allowClear={false}
                    defaultValue={1}
                    options={[
                        { value: 1, label: '一屏' },
                        { value: 2, label: '二屏' },
                        { value: 4, label: '四屏' },
                        { value: 6, label: '六屏' },
                        { value: 8, label: '八屏' },
                        { value: 9, label: '九屏' },
                        { value: 12, label: '十二屏' },
                    ]}
                    onChange={e => setPageSize(e)}
                />
            </div>

            <div className="Video">
                <LiveVideoBox data={data} PageSize={PageSize} Current={Current} />
            </div>
            {data && data.length !== 0 && (
                <div className="Pagination">
                    <Pagination
                        total={data.length}
                        current={Current}
                        showTotal={(total, range) => {
                            return `总计 ${total} 条数据,当前 ${range[0]}-${range[1]}`
                        }}
                        pageSize={PageSize}
                        onChange={e => setCurrent(e)}
                    />
                </div>
            )}
        </div>
    )
}

const LiveVideoBox = ({ data, PageSize, Current }) => {
    const [VideoList, setVideoList] = useState([])
    useEffect(() => {
        if (data && data.length !== 0) {
            if (PageSize === 1) setVideoList([data[PageSize * (Current - 1)]])
            else setVideoList(data.slice(PageSize * (Current - 1), PageSize * (Current - 1) + PageSize))
        }
    }, [Current, PageSize, data])
    return (
        <div className="LiveVideoBox">
            {VideoList.length !== 0 &&
                VideoList.map(item => (
                    <div
                        key={`HomeMonitorList${item.uuid}`}
                        className="LiveVideoBoxItem"
                        style={(() => {
                            switch (VideoList.length) {
                                case 1:
                                    return { width: '100%', height: '100%' }
                                case 2:
                                    return { width: 'calc(50% - 10px)', height: '100%' }
                                case 3:
                                    return { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' }
                                case 4:
                                    return { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' }
                                case 5:
                                    return { width: 'calc((100% / 3) - 10px)', height: 'calc(50% - 10px)' }
                                case 6:
                                    return { width: 'calc((100% / 3) - 10px)', height: 'calc(50% - 10px)' }
                                case 7:
                                    return { width: 'calc(25% - 10px)', height: 'calc(50% - 10px)' }
                                case 8:
                                    return { width: 'calc(25% - 10px)', height: 'calc(50% - 10px)' }
                                case 9:
                                    return { width: 'calc((100% / 3) - 10px)', height: 'calc((100% / 3) - 10px)' }
                                case 10:
                                    return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                case 11:
                                    return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                case 12:
                                    return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                default:
                                    break
                            }
                        })()}
                    >
                        <LiveBox live={item.liveUrl} cover={item.fileUrl} />
                    </div>
                ))}
        </div>
    )
}
